<template>
	<custom-form-layout>
		<fui-form>
			<custom-form-item-card>
				<fui-form-item asterisk label="评价时间" arrow :bottomBorder="false" prop="" @click="choseDate">
					<template #right>
						<fui-text type="primary" :text="formData.evaTime" :size="32"></fui-text>
					</template>
				</fui-form-item>

			</custom-form-item-card>

			<custom-form-item-card>
				<fui-form-item label="附件" :bottomBorder="false">
					<template #right>
						<custom-button-upload @change="changeFile"></custom-button-upload>
					</template>

				</fui-form-item>
				<custom-file-list :list="fileList" @del="delFile"></custom-file-list>
			</custom-form-item-card>
			<custom-form-item-card label="评价">
				<fui-form-item label="服务态度">
					<fui-rate activeColor="#E37318" :size="48" score="5"
						@change="changeRate($event,'serviceAttitude')"></fui-rate>
				</fui-form-item>
				<fui-form-item label="服务质量">
					<fui-rate activeColor="#E37318" :size="48" score="5"
						@change="changeRate($event,'serviceQuality')"></fui-rate>
				</fui-form-item>
				<fui-form-item label="响应时效">
					<fui-rate activeColor="#E37318" :size="48" score="5"
						@change="changeRate($event,'responsePrescription')"></fui-rate>
				</fui-form-item>

				<fui-form-item label="意见与建议" labelWidth="auto">
					<template #vertical>
						<fui-textarea v-model="formData.commentSuggestion" :border-top="false"
							placeholder="有什么需要改进的"></fui-textarea>
					</template>
				</fui-form-item>

			</custom-form-item-card>

			<custom-form-item-card label="签名">
				<view v-if="!signData" class="sign-box" @click="showSign">
					点击签名
				</view>
				<view class="sign-img" v-else @click="showSign">
					<img :src="signData" alt="" />

				</view>
			</custom-form-item-card>

		</fui-form>
		<template #footer>
			<fui-row :gutter="16">
				<fui-col :span="12">
					<fui-button background="#F2F3FF" color="#0052D9" @click="cancel">取消</fui-button>
				</fui-col>
				<fui-col :span="12">
					<fui-button @click="submit">确认</fui-button>
				</fui-col>
			</fui-row>
		</template>
	</custom-form-layout>
	<fui-bottom-popup :show="visibleSign" @close="closeDrawer">
		<view class="sign-page">
			<fui-autograph height="700rpx" background="#f1f1f1" ref="refAutograph" @ready="ready"></fui-autograph>
		</view>

		<fui-row>
			<fui-col :span="8">
				<fui-button class="sign-button button1" type="warning" @click="redrawSign">
					重签
				</fui-button>
			</fui-col>
			<fui-col :span="8">
				<fui-button class="sign-button button2" type="danger" @click="cancelSign">
					取消
				</fui-button>
			</fui-col>
			<fui-col :span="8">

				<fui-button class="sign-button button3" @click="completeSign">
					确定
				</fui-button>
			</fui-col>

		</fui-row>
	</fui-bottom-popup>
	<!-- <fui-drawer :show="visibleSign" @close="closeDrawer">
		<fui-row isFlex class="sign-page">
			<fui-col :span="4" class=" sign-opert">
				<fui-button class="sign-button button1" type="warning" @click="redrawSign">
					重签
				</fui-button>
				<fui-button class="sign-button button2" type="danger" @click="cancelSign">
					取消
				</fui-button>
				<fui-button class="sign-button button3" @click="completeSign">
					确定
				</fui-button>
			</fui-col>
			<fui-col :span="20" class="sign-area">

				<fui-autograph :height="canvasHeight" background="#f1f1f1" ref="refAutograph"
					@ready="ready"></fui-autograph>
			</fui-col>
		</fui-row>

	</fui-drawer> -->
	<fui-date-picker :show="visibleDatePicker" type="5" @change="changeDatePicker"
		@cancel="cancelDatePicker"></fui-date-picker>
</template>

<script>
	import {
		defineComponent
	} from "vue"
	import {
		mapWritableState
	} from 'pinia'
	import {
		useHandleWorkOrder_Eva
	} from "../../store/modules/handleWorkOrder_Eva"
	import utils from '@/components/firstui/fui-utils';
	import {
		WorkOrderApi,
		WorkOrderMyIndexApi
	} from "../../api/workOrder";
	import form from '@/components/firstui/fui-validator/fui-validator'
	import {
		FileApi
	} from "../../api/file";
	import {
		base64ToFile
	} from "../../utils/util";
	import {
		SubPages
	} from "../../config/router-config";
	import _ from 'lodash'
	export default defineComponent({
		data() {
			return {
				visibleSign: false,
				visibleDatePicker: false,
				canvasId: null,
				src: '',
				refAutograph: null,
				windowInfo: null,
				signData: null,

			}
		},
		onLoad(options) {
			console.log(options);
			this.windowInfo = uni.getWindowInfo()
			this.formData.evaTime = utils.dateFormatter(Date.now(), 'y-m-d h:i', 2)
			this.formData.orderNum = options.orderNum

		},

		computed: {
			...mapWritableState(useHandleWorkOrder_Eva, ['formData', 'fileList']),
			canvasHeight() {
				return this.windowInfo?.windowHeight * 2
			}
		},
		methods: {
			changeFile(f) {

				this.fileList = [...this.fileList, ...f]
			},
			delFile(index) {
				this.fileList.splice(index, 1)
			},
			changeRate(e, field) {
				this.formData[field] = e.score
			},
			showSign() {
				this.visibleSign = true
			},

			closeDrawer() {

			},

			ready(e) {
				console.log('ready');
				this.canvasId = e.canvasId
			},
			// 取消签名
			cancelSign() {
				this.visibleSign = false
				this.src = ''
			},
			//重新签名
			redrawSign() {

				this.src = '';
				this.$refs.refAutograph.redraw()
			},
			//完成签名
			completeSign() {
				this.$refs.refAutograph.drawComplete((res) => {
					//res为签名图片
					// src.value = res;
					console.log(res);
					this.signData = res;
					this.visibleSign = false
				})
			},
			// 选择时间

			choseDate() {
				this.visibleDatePicker = true
			},

			changeDatePicker({
				result
			}) {
				this.visibleDatePicker = false
				console.log(result)
			},
			cancelDatePicker() {
				this.visibleDatePicker = false
			},
			cancel() {
				uni.navigateBack()
			},
			async submit() {
				if (!this.signData) {
					this.fui.toast('请签名')
					return
				}
				const f = base64ToFile(this.signData)
				const res = await FileApi.upload('image', f)

				// await FileApi.getFile(res.mediaId)
				console.log(res);
				this.formData.mediaId = res.mediaId

				try {
					const rules = [{
						name: "mediaId",
						rule: ["required"],
						msg: ["请签名"]
					}];
					let {
						isPassed,
						errorMsg
					} = form.validator(this.formData, rules)
					if (isPassed) {
						if (this.fileList.length) {
							for (let i of this.fileList) {
								try {
									let f = base64ToFile(i.base64)
									const result = await FileApi.upload('image', f)
									const r = await FileApi.uploadWechatFile(result.mediaId)
									this.formData.enclosureList.push(r.data)
								} catch (err) {
									console.error(err);
								}

							}
						}
						await WorkOrderMyIndexApi.evaluate(this.formData)
						uni.showToast({
							icon: 'success',
							title: '评价成功!'
						})
						_.delay(() => {
							useHandleWorkOrder_Eva().$reset()
							uni.redirectTo({
								url: SubPages.MY_WORK_ORDER.router
							})
						}, 1000)
					} else {
						this.fui.toast(errorMsg)
					}
				} catch (err) {
					console.error(err);
				}
			}


		}
	})
</script>

<style lang="scss" scoped>
	.sign {
		&-page {
			display: flex;
			flex-direction: row;
			height: 40vh;

		}

		&-opert {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			position: relative;

			.sign-button {
				// transform: rotate(90deg);
				// position: absolute;

			}

			.button1 {
				top: 10%
			}

			.button2 {
				top: 45%
			}

			.button3 {
				top: 80%
			}

			// transform: rotate(90);
		}

		&-area {
			flex: 1;
			background-color: #e7e7e7;
			// padding: 16rpx;

			.signature {
				// background-color: #fff;
			}
		}

		&-box {
			margin: 6rpx;
			height: 352rpx;
			background: #ffffff;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 2rpx solid #e7e7e7;
			line-height: 352rpx;
			text-align: center;
		}

		&-img {
			margin: 6rpx;
			height: 352rpx;
			background: #ffffff;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 2rpx solid #e7e7e7;
			line-height: 352rpx;
			text-align: center;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	// 抽屉弹出样式 暂时不使用
	// .sign {
	// 	&-page {
	// 		display: flex;
	// 		flex-direction: row;
	// 		height: 100vh;

	// 	}

	// 	&-opert {
	// 		display: flex;
	// 		flex-direction: column;
	// 		justify-content: space-around;
	// 		position: relative;

	// 		.sign-button {
	// 			transform: rotate(90deg);
	// 			position: absolute;

	// 		}

	// 		.button1 {
	// 			top: 10%
	// 		}

	// 		.button2 {
	// 			top: 45%
	// 		}

	// 		.button3 {
	// 			top: 80%
	// 		}

	// 		// transform: rotate(90);
	// 	}

	// 	&-area {
	// 		flex: 1;
	// 		background-color: #e7e7e7;
	// 		// padding: 16rpx;

	// 		.signature {
	// 			// background-color: #fff;
	// 		}
	// 	}

	// 	&-box {
	// 		margin: 6rpx;
	// 		height: 352rpx;
	// 		background: #ffffff;
	// 		border-radius: 12rpx 12rpx 12rpx 12rpx;
	// 		border: 2rpx solid #e7e7e7;
	// 		line-height: 352rpx;
	// 		text-align: center;
	// 	}
	// }
</style>